<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>我的积分</p>
		</header>

		<page-rollback></page-rollback>
		<!--顶部总积分-->
		<div class="top">
			<div class="total-score">
				<p style="font-family: 宋体;">{{ totalPoints }}</p>
			</div>
			<div class="total-less-money">
				<p>可抵：</p>
				<p>{{ this.$formatMoney(totalCutMoney, '￥') }}</p>
			</div>
		</div>

		<!--积分明细-->
		<div class="score-detail">
			<div class="score-detail-head"><p>积分明细</p></div>
			<!--即将过期-->
			<ul class="about-to-expire">
				<li v-for="item in getAboutToExpirePointArr" :key="item.id">
					<div class="scores">
						<div class="scores-total">
							<p>积分：{{ item.points }}</p>
						</div>
						<div class="scores-date">
							<p>还有{{ item.expireRemain }}天过期</p>
							<p>即将过期</p>
						</div>
					</div>
				</li>
			</ul>

			<!--剩余积分-->
			<ul class="remaining-points">
				<li v-for="item in getReMainPointArr" :key="item.id">
					<div class="scores">
						<div class="scores-total">
							<p>积分：{{ item.points }}</p>
						</div>
						<div class="scores-date">
							<p>还有{{ item.expireRemain }}天过期</p>
						</div>
					</div>
				</li>
			</ul>
		</div>

		<div class="to-use-score">
			<button @click="toIndex">去使用</button>
		</div>
		
	</div>
</template>

<script>
import PageRollback from '../components/PageRollback.vue';
	export default {
  components: { PageRollback },
		name: 'UserScore',
		data() {
			return {
				pointArr: [],
				user: {},
			};
		},
		created() {
			this.user = this.$getSessionStorage('user');

			let url = `/PointController/checkPoints/${this.user.token.token}`;
			this.$axios.get(url)
			.then((response) => {
				if(response.data.result === null || response.data.result === ''){
					alert('Token已过期，请重新登录');
					// 或者触发路由跳转到登录页
					this.$router.push('/login');
				}
				else{
					this.pointArr = response.data.result;
					console.log('points is'+ this.pointArr)
				}
			})
			.catch((error) => {
				console.error(error);
				if (error.response && error.response.status === 401) {
					// Token过期，需要重新登录
					// 触发重新登录的逻辑，例如弹出提示框或跳转到登录页面
					alert('Token已过期，请重新登录');
					// 或者触发路由跳转到登录页
					this.$router.push('/login');
				}
			});

		},
		computed: {
			getAboutToExpirePointArr() {
				return this.pointArr.filter((item) => item.expireRemain <= 3);
			},
			getReMainPointArr() {
				return this.pointArr.filter((item) => item.expireRemain > 3);
			},
			totalPoints() {
				let total = 0;
				for (let i = 0; i < this.pointArr.length; i++) {
					total += this.pointArr[i].points;
				}
				return total;
			},
			totalCutMoney() {
				const pointsPerDollar = 100; // 每一块钱对应的积分数
				return this.totalPoints / pointsPerDollar;
			},
		},
		methods :{
			toIndex(){
				this.$router.push({path:'/index'});
			}
		}
	};
</script>

<style scoped>
	.wrapper {
		width: 100%;
		padding-top: 12vw;
		/* Add padding to account for the fixed header */
	}

	/* ********header部分******* */
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 5vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/*********顶部总积分*********/
	.wrapper .top{
		width: 100%;
		height: 50vw;
		background-color: #0097FF;
		color: #fff;
		position: fixed;
		left: 0;
		top: 12vw;
		z-index: 1000;
		display: flex;
		flex-direction: column;
	}
	.wrapper .top .total-score{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.wrapper .top .total-score p{
		margin-top: 7vw;
		font-size: 16vw;
		font-weight: 700;
		margin-bottom: 3vw;
	}

	.wrapper .top .total-less-money{
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wrapper .top .total-less-money p{
		font-size: 5vw;
		font-weight: 400;
		margin-bottom: 3vw;
	}

	/********积分明细********/
	.wrapper .score-detail{
		position: fixed;
		top:52vw;
		width: 80%;
		padding: 4vw;
		left: 50%;
		height:85vw;
		transform: translate(-50%);

		background-color: #fff;
		border-radius: 20px;
		border: solid 1px #DDD;

		z-index: 2000;

		display: flex;
		flex-direction: column;

		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); /*设置阴影*/

		overflow: auto; /* 添加溢出滚动属性 */
	}
	.wrapper .score-detail .score-detail-head{
		display: flex;
		justify-content: center;
		align-items: center;

		color: #0097FF;
		border-bottom:  solid 1px #AAA;

		font-size: 4.5vw;
		font-weight: 500;
		padding-bottom: 2vw;
	}
	.wrapper .score-detail .about-to-expire{
		padding: 0 1vw;
	}
	.wrapper .score-detail .about-to-expire li{
		border-bottom: solid 1px #DDD;
		color: #444;
		padding: 2vw;
	}
	.wrapper .score-detail .about-to-expire li .scores{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2vw;
	}
	.wrapper .score-detail .about-to-expire li .scores .scores-total{
		color:#0097FF;
	}
	.wrapper .score-detail .about-to-expire li .scores .scores-date p:last-child{
		font-size: 3vw;
		color: red;
		margin-left: 10vw;
	}

	.wrapper .score-detail .remaining-points {
	}
	.wrapper .score-detail .remaining-points li {
		border-bottom: solid 1px #DDD;
		color: #444;
		padding: 2vw;
	}
	.wrapper .score-detail .remaining-points li .scores{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2vw;
	}
	.wrapper .score-detail .remaining-points li .scores .scores-total{
		color:#0097FF;
	}

	.wrapper .to-use-score{
		width: 60%;
		box-sizing: border-box;
		position:fixed;
		bottom: 17vw;
		transform: translate(-50%);
		left: 50%;
	}
	.wrapper .to-use-score button {
		width: 100%;
		height: 10vw;

		font-size: 3.8vw;
		font-weight: 700;

		color: #fff;
		background-color: #0097FF;

		border-radius: 8vw;

		border: none;
		outline: none;
	}

</style>
